import React, { useRef, useState } from 'react';
import { useHover } from 'ahooks';
import { CheckOutlined, CloseOutlined, FormOutlined } from '@ant-design/icons';
interface IProps {
    inEditChildren: any;
    unInEditChildren: any;
    saveEdit: Function
}
const EditableComponent = (props: IProps) => {
    const hoverRef: any = useRef();
    const isHover = useHover(hoverRef);
    const [inEdit, setInEdit] = useState(false);
    const saveEdit = () => {
        setInEdit(false)
        props.saveEdit()
    }
    return (
        <div ref={hoverRef}>
            {inEdit ? (
                <>
                    {props.inEditChildren}
                    <CheckOutlined className="ml10 pointer" onClick={() => saveEdit()} />
                    <CloseOutlined className="ml10 pointer" onClick={() => setInEdit(false)} />
                </>
            ) : (
                <>
                    {props.unInEditChildren}
                    {isHover && <FormOutlined className="ml10" onClick={() => setInEdit(true)} />}
                </>
            )}
        </div>
    );
};
export default EditableComponent;
